<template>
  <div class="app-main-content-box">
    <div class="header">
      <div class="tabs">
        <el-tabs v-model="activeTabName" @tab-click="onClickTab">
          <el-tab-pane
            v-if="!$store.getters.banBtnList.includes('BTN_ORDER_MSG')"
            name="first"
          >
            <div slot="label">
              <el-badge :value="count" class="item" :max="99">
                <span>订单消息</span>
              </el-badge>
            </div>
          </el-tab-pane>
          <!--        <el-tab-pane label="系统消息" name="second" />-->
        </el-tabs>
      </div>
      <div>
        <el-button
          type="primary"
          size="mini"
          @click="onClickAllReadMsg"
        >全部已读</el-button>
      </div>
    </div>
    <section>
      <div v-if="list.length > 0" ref="listRef" class="list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="list-item"
          :class="{ 'list-item-message-readed': item.isRead }"
          @click="onClickGoDetail(item)"
        >
          <div class="list-title">
            <!--            你有一笔新的{{ get_business_type_text_filters(item.businessType)-->
            <!--            }}{{ get_order_type_text_filters(item) }}订单待处理！-->
            <span>{{ item.msg }}</span>
            <span class="list-title-time">{{ item.createTime }}</span>
          </div>
          <div
            v-for="(itemC, indexC) in item.extraMsg"
            :key="indexC"
            class="list-title"
          >
            {{ itemC.head }}：{{ itemC.tail }}
          </div>
          <!--          <div class="list-title">消费门店：{{ item.shop }}</div>-->
          <!--          <div class="list-title">-->
          <!--            顾客：{{ item.customer }}（{{ item.customerId }}）-->
          <!--          </div>-->
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无新消息" />
      </div>
    </section>
    <section class="fotter">
      <el-pagination
        background
        layout="prev, pager, next,total, sizes"
        :total="total"
        :page-sizes="[5, 10, 20]"
        @current-change="onListenListScroll"
        @size-change="onChangePageSize"
      />
    </section>
  </div>
</template>

<script>
import {
  getOrderMsgList,
  orderMsgReadAllMsg,
  orderMsgReadMsg
} from '@/api/work'
import { business_type_options, orderTypeOptions } from './config'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  filters: {},
  data() {
    return {
      activeTabName: 'first',
      list: [],
      isLastPage: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      lastMsgId: '',
      total: 0,
      count: 0
    }
  },
  computed: {
    ...mapGetters([
      'platformType'
    ])
  },
  watch: {
    count() {
      // 未读消息变化时候都要重新获取一次列表
      this.platformType === 2 && this.getList(true)
    }
  },
  created() {
    this.platformType === 2 && this.getList()
  },
  mounted() {
    // this.$refs.listRef.addEventListener('scroll', this.onListenListScroll)
  },
  methods: {
    onChangePageSize(e) {
      console.log('>>>', e)
      this.page.pageSize = e
      this.page.pageNum = 1
      this.list = []
      this.getList(false)
    },
    async getList(isClear = false) {
      if (this.$store.getters.banBtnList.includes('BTN_ORDER_MSG')) return
      if (isClear) {
        this.page = {
          pageNum: 1,
          pageSize: 10
        }
        this.list = []
      }
      const res = await getOrderMsgList({
        ...this.page
      })
      const { succeed, data } = res
      if (succeed) {
        const {
          count,
          pageInfo: { list, isLastPage, total }
        } = data
        list.map((v) => {
          v.isRead = v.status === 1
        })
        this.isLastPage = isLastPage
        this.count = count
        this.list = list
        this.total = total
      }
    },
    async onClickAllReadMsg() {
      const res = await orderMsgReadAllMsg({})
      const { succeed } = res
      if (succeed) {
        this.$message.success('已读成功')
        await this.getList(true)
      }
    },
    async onClickReadMsg(ids) {
      if (ids.length === 0) return
      const res = await orderMsgReadMsg({
        msgIds: ids
      })
      const { succeed } = res
      if (succeed) {
        this.$message.success('已读成功')
        this.$nextTick(() => {
          this.list.forEach((v) => {
            if (ids.includes(v.id)) {
              v.isRead = true
            }
          })
        })
      }
    },
    onListenListScroll(num) {
      this.page.pageNum = num
      this.getList()
    },
    get_business_type_text_filters(type) {
      return (
        business_type_options.filter((v) => v.value === type)[0].label || ''
      )
    },
    get_order_type_text_filters({ businessType, orderType }) {
      return (
        orderTypeOptions.filter(
          (v) => v.type === businessType && v.value === orderType
        )[0].label || ''
      )
    },
    onClickTab() {
      console.log('切换')
      this.getList(true)
    },
    onClickGoDetail(item) {
      const { businessType, orderNo, id, status } = item
      const isRead = status === 1
      const path =
        business_type_options.filter((v) => v.value === businessType)[0]
          .routerPath || ''
      console.log(path)

      this.$store.dispatch('SetMsgOrderNo', { orderNo, path })
      if (path) {
        if (!isRead) {
          this.onClickReadMsg([id])
        }
        this.$router.push({
          path
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-main-content-box {
  .list {
    height: 72vh;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &-item {
      padding: 10px 0;
      border-bottom: 1px whitesmoke solid;
    }
    &-title {
      padding: 5px 0;
      position: relative;
    }
    &-title-time {
      position: absolute;
      right: 0;
    }
  }
  .list::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .list-item-message-readed {
    color: darkgray;
  }
  .header {
    display: flex;
    .tabs {
      flex: 1;
    }
  }
}
/deep/.el-badge__content {
  top: 10px !important;
}

/deep/.el-tabs__nav-wrap::after {
  background-color: #dfe4ed !important;
}
/deep/.el-tabs__header {
  padding: 0 !important;
  margin: 0 !important;
}
</style>
